{% extends 'base.html' %}

{% block title %}{{ user_obj.username }} - 用户详情 - 固定资产管理系统{% endblock %}

{% block content %}
{% csrf_token %}
<div class="row">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:user_list' %}">用户管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ user_obj.username }}</li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="fas fa-user me-2"></i>{{ user_obj.get_full_name|default:user_obj.username }}</h2>
            <div class="btn-group">
                <a href="{% url 'assets:user_edit' user_obj.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>编辑用户
                </a>
                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                    <span class="visually-hidden">更多操作</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'assets:user_reset_password' user_obj.pk %}">
                        <i class="fas fa-key me-2"></i>重置密码
                    </a></li>
                    {% if user_obj != request.user %}
                    <li><hr class="dropdown-divider"></li>
                    {% if user_obj.is_active %}
                    <li><a class="dropdown-item text-warning" href="#" onclick="toggleUserStatus({{ user_obj.pk }}, false); return false;">
                        <i class="fas fa-user-slash me-2"></i>停用账户
                    </a></li>
                    {% else %}
                    <li><a class="dropdown-item text-success" href="#" onclick="toggleUserStatus({{ user_obj.pk }}, true); return false;">
                        <i class="fas fa-user-check me-2"></i>激活账户
                    </a></li>
                    {% endif %}
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="{% url 'assets:user_delete' user_obj.pk %}" onclick="return confirm('确定要删除用户 {{ user_obj.username }} 吗？')">
                        <i class="fas fa-trash me-2"></i>删除用户
                    </a></li>
                    {% endif %}
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{% url 'assets:user_list' %}">
                        <i class="fas fa-arrow-left me-2"></i>返回列表
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">用户名:</td>
                                        <td><strong>{{ user_obj.username }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">姓名:</td>
                                        <td>
                                            {% if user_obj.first_name or user_obj.last_name %}
                                                <i class="fas fa-id-card me-1 text-info"></i>{{ user_obj.first_name }} {{ user_obj.last_name }}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">邮箱:</td>
                                        <td>
                                            {% if user_obj.email %}
                                                <i class="fas fa-envelope me-1 text-success"></i>
                                                <a href="mailto:{{ user_obj.email }}" class="text-decoration-none">{{ user_obj.email }}</a>
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">账户状态:</td>
                                        <td>
                                            {% if user_obj.is_active %}
                                                <span class="badge bg-success">
                                                    <i class="fas fa-check me-1"></i>激活
                                                </span>
                                            {% else %}
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-times me-1"></i>未激活
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">用户角色:</td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                {% if user_obj.is_superuser %}
                                                    <span class="badge bg-danger mb-1">
                                                        <i class="fas fa-crown me-1"></i>超级用户
                                                    </span>
                                                {% endif %}
                                                {% if user_obj.is_staff %}
                                                    <span class="badge bg-info">
                                                        <i class="fas fa-user-tie me-1"></i>员工
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary">
                                                        <i class="fas fa-user me-1"></i>普通用户
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">最后登录:</td>
                                        <td>
                                            {% if user_obj.last_login %}
                                                <i class="fas fa-clock me-1 text-muted"></i>{{ user_obj.last_login|date:"Y-m-d H:i" }}
                                            {% else %}
                                                <span class="text-muted">从未登录</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">注册时间:</td>
                                        <td>
                                            <i class="fas fa-calendar me-1 text-muted"></i>{{ user_obj.date_joined|date:"Y-m-d H:i" }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">用户组数:</td>
                                        <td>
                                            <i class="fas fa-users me-1 text-primary"></i>{{ user_obj.groups.count }} 个用户组
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户组信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-users me-2"></i>所属用户组
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if user_obj.groups.all %}
                            <div class="row">
                                {% for group in user_obj.groups.all %}
                                <div class="col-md-6 mb-2">
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-user-friends me-2 text-primary"></i>
                                        <span class="badge bg-primary">{{ group.name }}</span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-users fa-2x mb-2"></i>
                                <p class="mb-0">该用户未分配到任何用户组</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 用户权限 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>用户权限
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if user_obj.user_permissions.all %}
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>应用</th>
                                            <th>模型</th>
                                            <th>权限名称</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for permission in user_obj.user_permissions.all %}
                                        <tr>
                                            <td><span class="badge bg-info">{{ permission.content_type.app_label }}</span></td>
                                            <td>{{ permission.content_type.model }}</td>
                                            <td>{{ permission.name }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-shield-alt fa-2x mb-2"></i>
                                <p class="mb-0">该用户未分配任何特定权限</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 用户状态和操作 -->
            <div class="col-md-4">
                <!-- 用户状态卡片 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-pie me-2"></i>用户状态
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="mb-3">
                            {% if not user_obj.is_active %}
                                <div class="alert alert-danger">
                                    <i class="fas fa-user-slash fa-2x mb-2"></i>
                                    <h5>账户未激活</h5>
                                    <p class="mb-0">该用户账户未激活，无法登录</p>
                                </div>
                            {% elif user_obj.is_superuser %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-crown fa-2x mb-2"></i>
                                    <h5>超级用户</h5>
                                    <p class="mb-0">拥有系统最高权限</p>
                                </div>
                            {% elif user_obj.is_staff %}
                                <div class="alert alert-info">
                                    <i class="fas fa-user-tie fa-2x mb-2"></i>
                                    <h5>员工用户</h5>
                                    <p class="mb-0">可以访问管理后台</p>
                                </div>
                            {% else %}
                                <div class="alert alert-secondary">
                                    <i class="fas fa-user fa-2x mb-2"></i>
                                    <h5>普通用户</h5>
                                    <p class="mb-0">标准用户权限</p>
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 class="text-primary">{{ user_obj.groups.count }}</h4>
                                <small class="text-muted">用户组</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-info">{{ user_obj.user_permissions.count }}</h4>
                                <small class="text-muted">特定权限</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 快速操作 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-bolt me-2"></i>快速操作
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{% url 'assets:user_reset_password' user_obj.pk %}" class="btn btn-warning btn-sm">
                                <i class="fas fa-key me-2"></i>重置密码
                            </a>
                            {% if user_obj != request.user %}
                                {% if user_obj.is_active %}
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="toggleUserStatus({{ user_obj.pk }}, false)">
                                        <i class="fas fa-user-slash me-2"></i>停用账户
                                    </button>
                                {% else %}
                                    <button type="button" class="btn btn-outline-success btn-sm" onclick="toggleUserStatus({{ user_obj.pk }}, true)">
                                        <i class="fas fa-user-check me-2"></i>激活账户
                                    </button>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-bar me-2"></i>统计信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless table-sm">
                            <tr>
                                <td class="text-muted">用户ID:</td>
                                <td>
                                    <code>{{ user_obj.pk }}</code>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">注册时间:</td>
                                <td>
                                    <i class="fas fa-calendar me-1 text-muted"></i>
                                    {{ user_obj.date_joined|date:"Y-m-d H:i" }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">最后登录:</td>
                                <td>
                                    {% if user_obj.last_login %}
                                        <i class="fas fa-clock me-1 text-muted"></i>
                                        {{ user_obj.last_login|date:"Y-m-d H:i" }}
                                    {% else %}
                                        <span class="text-muted">从未登录</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">所属资产:</td>
                                <td>
                                    <i class="fas fa-cube me-1 text-muted"></i>
                                    {{ user_obj.asset_set.count }} 个资产
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleUserStatus(userId, activate) {
    const action = activate ? '激活' : '停用';
    const username = '{{ user_obj.username }}';
    
    if (confirm(`确定要${action}用户 "${username}" 吗？`)) {
        // 显示加载状态
        const button = event.target.closest('button');
        const originalContent = button.innerHTML;
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>处理中...';
        
        // 发送AJAX请求
        fetch(`/users/${userId}/toggle-status/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: `activate=${activate}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 显示成功消息
                showAlert('success', data.message);
                
                // 刷新页面以更新状态显示
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                // 显示错误消息
                showAlert('error', data.error);
                
                // 恢复按钮状态
                button.disabled = false;
                button.innerHTML = originalContent;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', '操作失败，请稍后重试');
            
            // 恢复按钮状态
            button.disabled = false;
            button.innerHTML = originalContent;
        });
    }
}

function showAlert(type, message) {
    // 创建提示框
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // 插入到页面顶部
    const container = document.querySelector('.row .col-md-12');
    container.insertBefore(alertDiv, container.firstChild);
    
    // 3秒后自动消失
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 3000);
}
</script>
{% endblock %}